<template>
  <div>
    <mall-shelf title="修改密码">
      <div slot="content" class="md">
        <div>
          <input v-model="user.oldPassword" type="text" placeholder="请输入旧密码">
        </div>
        <div>
          <input v-model="user.newPassword" type="text" placeholder="请输入新密码">
        </div>
        <div>
          <input v-model="user.confirmPassword" type="text" placeholder="请输入确认密码">
        </div>
        <mall-button text="保存" class="btn" :class-style="btnHighlight?'main-btn':'disabled-btn'" @btnClick="handleUpdatePassword" />
      </div>
    </mall-shelf>
  </div>
</template>

<script>
import MallButton from '@/components/MallButton'
import MallShelf from '@/components/MallShelf'
import UserApi from '@/api/system/UserApi'

export default {
  components: {
    MallButton,
    MallShelf
  },
  data() {
    return {
      user: {
        oldPassword: null,
        newPassword: null,
        confirmPassword: null
      }
    }
  },
  computed: {
    btnHighlight() {
      return this.user.oldPassword && this.user.newPassword && this.user.confirmPassword
    }
  },
  created() {
  },
  methods: {
    handleUpdatePassword() {
      if (this.user.newPassword !== this.user.confirmPassword) {
        this.$message.error('两次密码不一致')
        return false
      }
      UserApi.updatePassword(this.user).then(response => {
        this.$message.success('修改成功')
        this.user = {
          oldPassword: null,
          newPassword: null,
          confirmPassword: null
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.md {
  > div {
    text-align: left;
    margin-bottom: 1px;
    > input {
      width: 100%;
      height: 50px;
      font-size: 18px;
      padding: 10px 20px;
      border: 1px solid #ccc;
      border-radius: 6px;
      box-shadow: 0 3px 5px -4px rgba(0, 0, 0, .4) inset, -1px 0 3px -2px rgba(0, 0, 0, .1) inset;
      line-height: 46px;
    }
  }
}

.btn {
  margin: 0;
  width: 100%;
  height: 50px;
  font-size: 14px;
  line-height: 48px
}
</style>
